<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>业务处理 - 过程页</title>

    <!-- Material Design Icons -->
    <link href="https://cdn.jsdelivr.net/npm/@mdi/font@7.x/css/materialdesignicons.min.css" rel="stylesheet">

    <!-- Vue 3 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

    <!-- Vuetify 3 -->
    <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.0/dist/vuetify.min.js"></script>

    <style>
        .main-container {
            max-width: 900px;
            margin: 20px auto;
            padding: 16px;
        }

        .v-navigation-drawer .v-list-item {
            min-height: 48px;
        }
    </style>

    <!-- CSRF Token -->
    {% csrf_token %}
</head>

<body>
    <div id="app">
        <v-app>
            <!-- 顶部导航栏 -->
            <!-- <v-app-bar color="primary" dark flat>
                <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
                <v-app-bar-title class="text-h6 font-weight-bold">
                    业务处理系统
                </v-app-bar-title>
                <v-spacer></v-spacer>
                <span class="mr-2">欢迎，{{ currentUser }}</span>
                <v-btn icon variant="text" @click="toggleTheme">
                </v-btn>
                <v-btn icon variant="text" href="/accounts/logout/" title="退出登录">
                    <v-icon>mdi-logout</v-icon>
                </v-btn>
            </v-app-bar> -->

            <v-app-bar color="primary" dark>
                <v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
                <v-app-bar-title>My Django App</v-app-bar-title>

                <!-- <div class="ml-4 d-flex align-center" style="color: white; font-size: 14px; padding-right: 1%;">
                  <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;">欢迎, Admin</a>
                  <span style="color: rgba(255,255,255,0.6); margin: 0 8px;"> | </span>
                  <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;" @click="toggleTheme">更换主题</a>
                  <span style="color: rgba(255,255,255,0.6); margin: 0 8px;"> | </span>
                  <a href="#" style="color: rgba(255,255,255,0.9); text-decoration: none;">退出</a>
                </div> -->
                <!-- 欢迎信息 -->
                <span class="mr-2">欢迎，{{ currentUser }} </span>

                <!-- 主题切换 -->
                <v-btn icon variant="text" @click="toggleTheme" title="更换主题">
                    |
                    <v-icon>mdi-theme-light-dark</v-icon>
                </v-btn>

                <!-- 退出 -->
                <v-btn icon variant="text" href="/logout/" title="退出登录">
                    |
                    <v-icon>mdi-logout</v-icon>
                </v-btn>
                </v-btn>

            </v-app-bar>

            <!-- 抽屉 -->
            <v-navigation-drawer v-model="drawer" temporary>
                <v-list nav>
                    <v-list-item title="主页" href="/"></v-list-item>
                    <v-list-item title="准备工作" href="/app1/prepare/"></v-list-item>
                    <v-list-item title="业务处理" href="/app1/process/"></v-list-item>
                </v-list>
            </v-navigation-drawer>

            <!-- 主内容 -->
            <v-main>
                <div class="main-container">
                    <v-card title="业务处理表单" subtitle="请选择条件并提交以生成报表">
                        <v-card-text>
                            <form method="post" action="/process/download/" enctype="multipart/form-data">


                                <!-- 单选组：是否启用下拉框 -->
                                <!-- <v-radio-group v-model="selectedOption" label="是否启用项目选择？" mandatory>
                                    <v-radio label="是，启用" value="enable"></v-radio>
                                    <v-radio label="否，跳过" value="disable"></v-radio>
                                    <v-radio label="其他" value="other"></v-radio>
                                </v-radio-group> -->

                                <!-- 输出格式 -->
                                <!-- <v-radio-group v-model="outputFormat" label="输出格式">
                                    <v-radio label="汇总报表" value="summary"></v-radio>
                                    <v-radio label="明细报表" value="detail"></v-radio>
                                </v-radio-group> -->

                                <!-- 优先级 -->
                                <!-- <v-radio-group v-model="priority" label="优先级">
                                    <v-radio label="低" value="low"></v-radio>
                                    <v-radio label="中" value="medium"></v-radio>
                                    <v-radio label="高" value="high"></v-radio>
                                </v-radio-group> -->

                                {% csrf_token %}

                                <!-- 单选组：水平排列 -->
                                <v-radio-group v-model="selectedOption" label="是否启用项目选择？" mandatory>
                                    <v-row class="flex-row" style="gap: 32px; align-items: center; flex-wrap: nowrap;">
                                        <v-col cols="auto" style="padding: 8px;">
                                            <v-radio label="是，启用" value="enable"></v-radio>
                                        </v-col>
                                        <v-col cols="auto" style="padding: 0;">
                                            <v-radio label="否，跳过" value="disable"></v-radio>
                                        </v-col>
                                        <v-col cols="auto" style="padding: 0;">
                                            <v-radio label="其他" value="other"></v-radio>
                                        </v-col>
                                    </v-row>
                                </v-radio-group>



                                <!-- 多选下拉框（带模糊查询） -->
                                <v-combobox v-model="selectedItems" :items="allItems" label="选择项目（支持输入过滤）"
                                    :disabled="selectedOption !== 'enable'" chips multiple clearable hide-selected
                                    small-chips class="mb-4">
                                    <template v-slot:no-data>
                                        <v-list-item>
                                            <v-list-item-title>
                                                未找到匹配项。
                                            </v-list-item-title>
                                        </v-list-item>
                                    </template>
                                </v-combobox>



                                <!-- 开始年月 + 结束年月（同行显示） -->
                                <v-row class="mb-4">
                                    <!-- 开始年月 -->
                                    <v-col cols="12" md="6" class="pr-md-2">
                                        <v-select v-model="yearMonth1" :items="yearMonthOptions" label="开始年月"
                                            placeholder="请选择开始年月" prepend-icon="mdi-calendar" variant="outlined"
                                            required @change="validateDates"></v-select>
                                    </v-col>

                                    <!-- 结束年月 -->
                                    <v-col cols="12" md="6" class="pl-md-2">
                                        <v-select v-model="yearMonth2" :items="yearMonthOptions" label="结束年月"
                                            placeholder="请选择结束年月" prepend-icon="mdi-calendar" variant="outlined"
                                            required @change="validateDates"></v-select>
                                    </v-col>
                                </v-row>

                                <!-- 提交按钮 -->
                                <v-btn type="submit" color="primary" class="mt-6" size="large" block>
                                    生成并下载 XLSX 报表
                                </v-btn>
                            </form>
                        </v-card-text>
                    </v-card>
                </div>
            </v-main>
        </v-app>
    </div>



    <script>
        const { createApp } = Vue;

        // 模拟从数据库获取的 item 列表
        const allItems = [
            "Project Alpha", "Project Beta", "Data Migration", "System Audit",
            "User Training", "Network Upgrade", "Security Patch", "Backup Plan",
            "API Integration", "Dashboard Redesign", "Performance Tuning",
            "Customer Onboarding", "Invoice Processing", "Report Automation"
        ];

        // 绿色主题（与之前一致）
        const lightTheme = {
            dark: false,
            colors: {
                background: '#FFFFFF',
                surface: '#FFFFFF',
                primary: '#43A047',
                secondary: '#5C6BC0',
                accent: '#8D6E63',
                error: '#EF5350',
                info: '#2196F3',
                success: '#66BB6A',
                warning: '#FFB74D',
            }
        };

        const darkTheme = {
            dark: true,
            colors: {
                background: '#121212',
                surface: '#212121',
                primary: '#4DB6AC',
                secondary: '#7E57C2',
                accent: '#BDBDBD',
                error: '#EF9A9A',
                info: '#4FC3F7',
                success: '#81C784',
                warning: '#FFD54F',
            }
        };

        // 生成年月选项：从 startYear 到 endYear
        function generateYearMonthOptions(startYear, endYear) {
            const options = [];
            for (let year = startYear; year <= endYear; year++) {
                for (let month = 1; month <= 12; month++) {
                    const mm = month.toString().padStart(2, '0'); // 01, 02, ..., 12
                    options.push(`${year}-${mm}`);
                }
            }
            return options;
        }

        const vuetify = Vuetify.createVuetify({
            theme: {
                defaultTheme: 'lightTheme',
                themes: { lightTheme, darkTheme }
            }
        });

        const app = createApp({
            data() {
                return {
                    drawer: false,
                    theme: 'lightTheme',
                    currentUser: "{{ user.username|default:'User' }}",
                    selectedMonth: null,

                    // 表单数据
                    selectedOption: 'disable',
                    selectedItems: [],
                    yearMonth1: '',
                    yearMonth2: '',
                    outputFormat: 'summary',
                    priority: 'medium',

                    // 下拉选项
                    allItems: [
                        "Project Alpha", "Project Beta", "Data Migration", "System Audit",
                        "User Training", "Network Upgrade", "Security Patch", "Backup Plan",
                        "API Integration", "Dashboard Redesign", "Performance Tuning",
                        "Customer Onboarding", "Invoice Processing", "Report Automation"
                    ],

                    // 年月选择器控制
                    // 验证状态
                    isValid: true,
                    errorMessage: '',
                    // 动态生成年月选项（如 2015-01 到 2030-12）
                    yearMonthOptions: generateYearMonthOptions(2025, 2035),

                };
            },
            methods: {
                toggleTheme() {
                    this.theme = this.theme === 'lightTheme' ? 'darkTheme' : 'lightTheme';
                    this.$vuetify.theme.name = this.theme;
                },

                filterItems(event) {
                    const query = event.target.value?.toLowerCase() || '';
                    if (!query) {
                        this.filteredItems = [...this.allItems];
                    } else {
                        this.filteredItems = this.allItems.filter(item =>
                            item.toLowerCase().includes(query)
                        );
                    }
                },
                resetItems() {
                    this.filteredItems = [...this.allItems];
                }
            }
        });

        app.use(vuetify);
        app.config.globalProperties.$vuetify = vuetify;
        app.mount('#app');
    </script>
</body>

</html>